<template>
  <div class="home-page-wrapper" :class="isMobile ? 'mobile-wrapper' : ''">
    <!-- 导航页 -->
    <div class="nav-bar" :class="!isCollapse ? 'open-panel': ''">
      <NavBar @collapse="collapse"/>
    </div>
    <div class="main">
      <!-- 移动端面板 -->
      <div v-if="showPanel" class="mobile-panel">
        <NavBar :initStatus="false"/>
      </div>
      <div class="header font-medium" @click.stop="closePannel">
        <div class="col-icon" @click.stop="changePanel">
          <img src="@/assets/image/left.svg" v-if="!showPanel" alt="">
          <img src="@/assets/image/right.svg" v-else alt="">
        </div>
        <div v-if="isCollapse" class="left-logo">
          <img src="@/assets/image/logos.svg" alt="">
          <label class="font-family">Amateras</label>
        </div>
        <label class="link-btn font-medium" @click="connect" v-if="!currentAddress">Connect</label>
        <label v-else class="link-btn font-medium" @click="openWallet">{{currentAddress | formatAddress}}</label>
        <label class="switch-btn font-medium" v-if="!isCurrentNet" @click="changeNet">Switch to BSC</label>
      </div>
      <div @click.stop="closePannel" class="bag">
        <router-view/>
      </div>
    </div>
    <!-- 公共弹窗 -->
    <BaseDialog :showDialog.sync="showDialog" v-bind="metaMask">
      <template slot="content">
        <div class="noMetaMask">
          <p class="confirm"><a style="color: #fff;" href="https://metamask.io/download.html" target="_blank">https://metamask.io/download.html</a>
          </p>
        </div>
      </template>
    </BaseDialog>
    <div v-if="showWallet">
      <BaseDialog :showDialog.sync="showWallet" v-bind="config" @confirm="confirm">
        <div slot="content" class="content-wrapper" :class="isMobile ? 'mobile-wrapper' : ''">
          <p class="address">{{currentAddress}} <img class="copy" @click="copy(currentAddress)" src="../assets/image/copy.jpg" alt=""></p>
          <p class="goto"> view on BSCSCAN <label @click="runtoBsc(currentAddress)" style="cursor: pointer;"><img
            src="../assets/image/jump.jpg" alt=""></label></p>
        </div>
      </BaseDialog>
    </div>

    <BaseDialog :showDialog.sync="connectAwallets" v-bind="connectAwallet">
      <template slot="content">
        <div class="noMetaMask">
          <div class="confirm">
            <div class="froms" @click="metamasks()">
              <div class="fromsleft">Metamask</div>
              <div><img class="fromsrig" src="../assets/image/MetaMask-wallet.png" alt=""></div>
            </div>
            <div class="froms" @click="metamasks()">
              <div class="fromsleft">TrustWallet</div>
              <div><img class="fromsrig" src="../assets/image/TrustWallet.png" alt=""></div>
            </div>
            <div class="froms" @click="metamasks()">
              <div class="fromsleft">MathWallet</div>
              <div><img class="fromsrig" src="../assets/image/MathWallet.png" alt=""></div>
            </div>
            <div class="froms" @click="metamasks()">
              <div class="fromsleft">TokenPocket</div>
              <div><img class="fromsrig" src="../assets/image/TokenPocket.png" alt=""></div>
            </div>
            <div class="froms" @click="metamasks()">
              <div class="fromsleft">SafePal Wallet</div>
              <div><img class="fromsrig" src="../assets/image/safepalWallet.png" alt=""></div>
            </div>
          </div>
        </div>
      </template>
    </BaseDialog>
  </div>
</template>

<script>
import NavBar from '@/components/nav/Index';
import { mapState, mapMutations } from 'vuex';
import { chainIdMap } from '@/utils/constants';
import {
  getAccountForMetaMask,
  checkChain,
} from '@/utils';
import BaseDialog from '@/components/dialog/Index';

export default {
  components: {
    NavBar,
    BaseDialog,
  },
  data() {
    return {
      showDialog: false,
      config: {
        confirmText: 'Log Out',
        title: 'My Wallet',
      },
      metaMask: {
        dialogType: 'tips',
        title: 'MetaMask',
      },
      connectAwallet: {
        dialogType: 'tips',
        title: 'Connect A Wallet',
        isShowBtn: false,
      },
      connectAwallets: false,
      showWallet: false,
      isCollapse: true,
      isMobile: false,
      tradeStatus: '',
      showPanel: false,
    };
  },
  computed: {
    ...mapState(['chainId', 'currentAddress']),
    isCurrentNet() {
      return this.chainId === chainIdMap['BSC'];
    },
  },
  created() {
    this.updateCurrentAddress(sessionStorage.getItem('address'));
    this.resizeChange();
    window.onresize = () => {
      this.resizeChange();
    };
  },
  methods: {
    ...mapMutations(['updateCurrentAddress']),
    async metamasks() {
      this.connectAwallets = false;
      const address = await getAccountForMetaMask();
      sessionStorage.setItem('address', address);
      this.updateCurrentAddress(address);
    },
    resizeChange() {
      if (window.matchMedia('(max-width: 750px)').matches) {
        // 视图端口的宽度小于750像素
        this.isMobile = true;
      } else {
        // 视图端口至少有750像素宽
        this.isMobile = false;
      }
    },
    async connect() {
      if (!window.ethereum) {
        this.showDialog = true;
        return;
      }
      // 7-1
      this.connectAwallets = true;
    },
    openWallet() {
      this.showWallet = true;
    },
    confirm() {
      sessionStorage.setItem('address', '');
      this.updateCurrentAddress('');
      this.showWallet = false;
      if (this.$route.name !== 'swap-countdown') this.$router.push('/');
    },
    runtoBsc(addresss) {
      window.open(`https://bscscan.com/address/${addresss}`);
    },
    collapse(val) {
      this.isCollapse = val;
    },
    async changeNet() {
      await checkChain({ target: 'BSC' });
    },
    changePanel() {
      this.showPanel = !this.showPanel;
    },
    closePannel() {
      this.showPanel = this.showPanel ? false : false;
    },
  },
};
</script>

<style lang="scss">
  @import '@/style/variable.scss';

  .content-wrapper {
    color: #fff;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 20px;
    font-weight: bold;

    img {
      vertical-align: middle;
      margin-left: 20px;
    }

    .goto {
      color: #61B7E8;
      font-size: 16px;
      margin-top: 30px;
      cursor: pointer;
    }

    .copy {
      cursor: pointer;
      color: $global-primary;
    }
  }
</style>
<style lang="scss" scoped>
  @import '@/style/variable.scss';
  .address{
    font-size: 24px;
  }
  .mobile-wrapper .address{
    font-size: 16px;
  }
  .home-page-wrapper {
    color: $text-color;
    width: 100%;
    /*overflow-x: scroll;*/
    display: flex;
    flex-direction: row;

    .open-panel {
      min-width: 240px;
    }

    .header {
      height: 60px;
      background: #373E45;
      border: 1px solid #434950;
      box-sizing: border-box;
      position: fixed;
      top: 0;
      z-index: 1000;
      left: 0;
      right: 0;
    }

    .main {
      width: 100%;
      margin: 0 auto 0;
      padding-top: 60px;
      box-sizing: border-box;
      overflow-y: auto;
      /* 增加该属性，可以增加弹性 */
      -webkit-overflow-scrolling: touch;

      .footer {
        flex: 1;
      }
    }

    .switch-btn {
      float: right;
      padding: 0 30px;
      height: 42px;
      background: $global-primary;
      border-radius: 48px;
      text-align: center;
      line-height: 42px;
      font-size: 14px;
      margin-top: 9px;
      cursor: pointer;
      margin-right: 10px;
    }

    .link-btn {
      float: right;
      padding: 0 30px;
      height: 42px;
      background: $global-primary;
      border-radius: 48px;
      text-align: center;
      line-height: 42px;
      font-size: 14px;
      margin-top: 9px;
      cursor: pointer;
      margin-right: 100px;
    }

    .left-logo {
      display: inline-block;
      line-height: 60px;
      margin-left: 100px;

      label {
        font-size: 16px;
      }

      img {
        position: relative;
        top: -2px;
        vertical-align: middle;
        margin: 0 12px;
        width: 32px;
      }
    }
  }

  .noMetaMask {
    .confirm {
      padding: 0 30px;
      box-sizing: border-box;
      margin: 37px 0 25px 0;

      a {
        font-size: 20px;
      }
    }

    .froms {
      border: 2px #000000 solid;
      border-radius: 20px;
      background: #2D3339;
      display: flex;
      justify-content: space-between;
      padding: 16px 30px;
      margin-bottom: 10px;

      .fromsleft {
        font-weight: bold;
        font-size: 18px;
        line-height: 27px;
        color: #FFFFFF;
      }

      .fromsrig {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #FFFFFF;
      }
    }


  }

  .col-icon {
    display: none;
  }

  .bag {
  }

  .bag::-webkit-scrollbar {
    display: none;
    width: 0 !important
  }
</style>
